<!doctype html>
<html lang="en">

<head>
  <title>Title</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <!-- Bootstrap CSS -->
  <!-- bootstrap 4.x is supported. You can also use the bootstrap css 3.3.x versions -->
  <link rel="stylesheet" href="./font-awesome/css/fontawesome.min.css">
  <link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.min.css">
  <link href="./bootstrap-fileinput/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
  <!-- if using RTL (Right-To-Left) orientation, load the RTL CSS file after fileinput.css by uncommenting below -->
  <!-- link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /-->
  <script src="./jquery/dist/jquery.min.js"></script>
  <!-- piexif.min.js is needed for auto orienting image files OR when restoring exif data in resized images and when you
    wish to resize images before upload. This must be loaded before fileinput.min.js -->
  <script src="./bootstrap-fileinput/js//plugins/piexif.js" type="text/javascript"></script>
  <!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview.
    This must be loaded before fileinput.min.js -->
  <script src="./bootstrap-fileinput/js/plugins/sortable.min.js" type="text/javascript"></script>
  <!-- purify.min.js is only needed if you wish to purify HTML content in your preview for
    HTML files. This must be loaded before fileinput.min.js -->
  <script src="./bootstrap-fileinput/js/plugins/purify.min.js" type="text/javascript"></script>
  <!-- popper.min.js below is needed if you use bootstrap 4.x. You can also use the bootstrap js
   3.3.x versions without popper.min.js. -->
  <script src="./popper.js/dist/umd/popper.min.js"></script>
  <!-- bootstrap.min.js below is needed if you wish to zoom and preview file content in a detail modal
    dialog. bootstrap 4.x is supported. You can also use the bootstrap js 3.3.x versions. -->
  <script src="./bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
  <!-- the main fileinput plugin file -->
  <script src="./bootstrap-fileinput/js/fileinput.js"></script>
  <!-- optionally if you need a theme like font awesome theme you can include it as mentioned below -->
  <script src="./bootstrap-fileinput/themes/fa/theme.min.js"></script>
  <!-- optionally if you need translation for your language then include  locale file as mentioned below -->
  <script src="./bootstrap-fileinput/js/locales/zh.js"></script>


  <script src="./vue/dist/vue.min.js"></script>
  <script src="./moment/moment.js"></script>
  <script src="./moment/locale/zh-cn.js"></script>



</head>

<body>



  <div class="jumbotron">
    <h3 class="display-3">upload</h3>
  </div>


  <div id="fileItemApp" class="container" style="width: 800px; margin: 20px auto;">


    <div class="main" v-show="display == 'main'">


      <form class="form-inline">
        <!--<label for="email">Email:</label>-->
        <input type="text" v-model="fileItemSearchForm.fileName" class="form-control" >
        <button type="button" class="btn btn-primary" @click="queryFileItemList()">search</button> &nbsp;&nbsp;
        <button type="button" class="btn btn-success" @click="fnFileItemModal()">add file</button>
      </form>



      <div class="grid">


        <template v-for="(item, index) in dataList" :key="index">
          <div class="card" style="margin:10px auto;">

            <div class="card-body">
              <h4 class="card-title">{{item.udate }}</h4>
              <p><span class="badge badge-info">{{item.tags}}</span></p>

              <p class="card-text">

                <span class="text-muted text-wrap">
                  <a :href="'/file-items/download/'+item.uploadName" class="card-link">{{item.fileName}}</a>
                </span>
                &nbsp; &nbsp;<span class="text-success"> {{item.sizeFmt }} MB</span>
                &nbsp; &nbsp; <span class="text-muted text-wrap">

                  <button type="button" @click="fnVideo(item)"  class="btn btn-primary">play</button>
                  <!-- <a href="#" @click="fnVideo(item)" class="card-link">play</a> -->
                </span>
              </p>

              <!--<button type="button" class="btn  btn-primary" @click="fnShowEditModal(item)">edit</button>-->
              <!--<button type="button" class="btn  btn-danger" @click="fnShowDeleteModal(item)">del</button>-->
              <!--<a href="#" class="card-link">Another link</a>-->
            </div>
          </div>
        </template>


      </div>

    </div>



    <!-- 模态框 -->
    <div class="modal fade" id="uploadModal">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <h4 class="modal-title">file upload</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>

          <div class="modal-body">

            <form action="" method="post">


              <!--<div class="form-group">-->
              <!--<label for=""></label>-->
              <!--<input type="file" class="form-control-file"  name="" id="uploadFile"-->
              <!--placeholder="" aria-describedby="fileHelpId">-->
              <!--<small id="fileHelpId" class="form-text text-muted">please select file</small>-->
              <!--</div>-->

              <div class="file-loading">
                <input id="uploadFile" name="file" type="file" multiple>
              </div>

            </form>


          </div>


          <!-- 模态框底部 -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">cancel</button>
            <!--<button type="button" class="btn btn-primary" @click="fnUpload()">save</button>-->
          </div>
        </div>
      </div>


    </div>

  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->

  <!-- optionally if you need a theme like font awesome theme you can include it as mentioned below -->
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.5.2/themes/fa/theme.js"></script> -->
  <!-- optionally if you need translation for your language then include  locale file as mentioned below -->
  <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.5.2/js/locales/zh-CN.js"></script>-->


</body>

</html>

<script>






  var vm = new Vue({
    el: '#fileItemApp',
    data: {

      tip: 'ok',
      display: 'main',
      total: 0,
      page: 1,

      //search form
      fileItemSearchForm: {
        cateId: '',
        fileName: '',
      },

      dataList: [{},],



    },

    computed: {

      pages() {
        return Math.ceil(this.total / 10);
      }
    },

    filters: {

      fmtDate(date) {
        return date + moment(date).format('dddd');
      }
    },


    methods: {



        getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        },


        //新增 article modal
      fnFileItemModal() {
        $('#uploadModal').modal('show');

      },




      fnUpload() {

        var _self = this;

        var formData = new FormData();
        let file = document.getElementById("uploadFile").files[0];
        if (!file) {
          return false;
        }
        formData.append("file", file);
        $.ajax({
          url: "/file-items/upload",
          type: "POST",
          data: formData,
          /**
           *必须false才会自动加上正确的Content-Type
           */
          contentType: false,
          /**
           * 必须false才会避开jQuery对 formdata 的默认处理
           * XMLHttpRequest会对 formdata 进行正确的处理
           */
          processData: false,
          success: function (res) {

            _self.queryFileItemList();
            $('#uploadFile').val('');
            $('#uploadModal').modal('hide');
          },
          error: function () {
            alert("上传失败！");
          }
        });

      },

      fnShowDeleteModal(item) {

        this.deleteId = item.sid;
        $('#deleteModal').modal('show');
      },


      fnDelete() {

        var _self = this;
        $.ajax({
          // crossDomain: true,
          type: "post",
          url: "../walle-cards/" + _self.deleteId,

          dataType: "json",
          success: function (response) {
            // console.log(response);
            if (response.code == 0) {

              _self.queryfileItemList();
              $('#deleteModal').modal('hide');
            }

          }
        });


      },



      // 查询 cate
      queryFileItemList() {

        var _self = this;
        $.ajax({
          // crossDomain: true,
          type: "get",
          url: "../file-items?sort=udate,desc",
          data: _self.fileItemSearchForm,
          dataType: "json",
          success: function (response) {
            // console.log(response);
            if (response.code == 0) {

              console.log(response);
              _self.dataList = response.dat.content;
            }

          }
        });
      },


      initFileInput() {


        var _self = this;
        var control = $('#uploadFile');
        //初始化上传控件的样式
        control.fileinput({
          language: 'zh', //设置语言
          uploadUrl: 'file-items/upload', //上传的地址
          //            allowedFileExtensions: ['xls', 'xlsx'],//接收的文件后缀
          uploadAsync: true, //默认异步上传
          showUpload: false, //是否显示上传按钮
          showRemove: false, //显示移除按钮
          showPreview: true, //是否显示预览
          showCaption: false,//是否显示标题
          showZoom: false,                                         // 显示预览按钮
          //          hideThumbnailContent:true,                  // 是否隐藏文件内容
          browseClass: "btn btn-primary", //按钮样式
          //          uploadLabel:"上传附件",                         // 上传按钮内容
          //          browseLabel: '选择附件',                            // 浏览按钮内容
          //dropZoneEnabled: false,//是否显示拖拽区域
          //minImageWidth: 50, //图片的最小宽度
          //minImageHeight: 50,//图片的最小高度
          //maxImageWidth: 1000,//图片的最大宽度
          //maxImageHeight: 1000,//图片的最大高度
          //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
          //minFileCount: 0,
          //            maxFileCount: 1, //表示允许同时上传的最大文件个数
          enctype: 'multipart/form-data',
          validateInitialCount: true,
          previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
          msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
          uploadExtraData: function (previewId, index) {   //额外参数的关键点
            return {

              scode: 'card'
            }

          }
        }).on('filebatchselected', function (event, files) {//选中文件事件

          $(this).fileinput("upload");

        }).on("fileuploaded", function (event, d, previewId, index) {
          var data = d.response.message;
          var state = d.response.state;

          _self.queryFileItemList();


        })

      },


      fnVideo(item){

        console.log(item);

        window.open('video.html?id=' + item["uploadName"]);
      }



    },
    mounted() {

      this.queryFileItemList();

      this.initFileInput();



    }
  })







</script>